<template>
  <view class="app-container">
    <view class="header">
      <u-tabs :list="options1" @change="handleStatusChange"></u-tabs>
      <u-tabs :list="options2" @change="handleTypeChange"></u-tabs>
    </view>

    <view class="content">
      <scroll-view
        scroll-y
        :style="{ height: heightStyle }"
        @scrolltolower="onScrolltolower"
      >
        <view class="list-container">
          <template v-if="list.length">
            <view
              v-for="item in list"
              :key="item.id"
              class="item-card"
              @click="handleToDetail(item)"
            >
              <view class="field">
                <view class="label">售后单号</view>
                <view class="value">{{ item.code }}</view>
              </view>
              <u-gap height="10"></u-gap>
              <view class="field">
                <view class="label">订单编号</view>
                <view class="value">{{ item.order.code }}</view>
              </view>
              <u-gap height="10"></u-gap>
              <view class="field">
                <view class="label">申请时间</view>
                <view class="value">{{ item.created_at }}</view>
              </view>
              <u-gap height="10"></u-gap>
              <view class="field">
                <view class="label">售后类型</view>
                <view class="value">{{ formatType(item.type) }}</view>
              </view>
              <u-gap height="10"></u-gap>
              <view class="field">
                <view class="label">售后状态</view>
                <view class="value">{{ formatStatus(item.status) }}</view>
              </view>
              <u-gap height="10"></u-gap>
              <view class="field">
                <view class="label">退款金额</view>
                <view class="value" style="color: #e54746">
                  ¥{{ item.refund_amount }}
                </view>
              </view>
              <u-gap height="10"></u-gap>
              <view class="goods-list">
                <view
                  v-for="goods in item.order.lines"
                  :key="goods.id"
                  class="goods-item"
                >
                  <image
                    class="goods-image"
                    :src="goods.product?.image_url"
                    mode="aspectFill"
                  />
                  <view class="goods-info">
                    <view class="goods-name">{{ goods.name }}</view>
                    <view class="goods-spec">
                      <text>数量: {{ goods.quantity }}</text>
                      <text>¥{{ goods.variant.sale_price }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </template>
          <template v-else>
            <my-empty text="暂无售后记录"></my-empty>
          </template>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { onShow } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
import { useStore } from "vuex";
import { supplierSaleServices } from "@/common/apis/supplier.js";

const store = useStore();

const query = reactive({
  page: 1,
  size: 10,
  status: "",
  type: "",
});

const list = ref([]);
const pageTotal = ref(0);

let heightStyle = "";

// #ifndef H5
heightStyle = `calc(100vh - 60px)`;
// #endif

// #ifdef H5
heightStyle = `calc(100vh - 94px)`;
// #endif

const options1 = [
  { name: "全部", value: "" },
  { name: "等待审核", value: "pending" },
  { name: "同意", value: "pass" },
  { name: "退款中", value: "refund" },
  { name: "拒绝", value: "reject" },
  { name: "完成", value: "completed" },
  { name: "取消", value: "canceled" },
];

const options2 = [
  { name: "全部", value: "" },
  { name: "退货退款", value: "return" },
  { name: "仅退款", value: "refund" },
  { name: "换货", value: "replace" },
  { name: "补发商品", value: "reissue" },
];

function formatStatus(status) {
  const c = options1.find((i) => i.value == status);
  return c ? c.name : "";
}

function formatType(type) {
  const c = options2.find((i) => i.value == type);
  return c ? c.name : "";
}

function onScrolltolower() {
  if (query.page < pageTotal.value) {
    query.page += 1;
    getList(true);
  }
}

function handleStatusChange(e) {
  query.status = e.value;
  query.page = 1;
  getList();
}

function handleTypeChange(e) {
  console.log(e);
  query.type = e.value;
  query.page = 1;
  getList();
}

async function getList(isConcat = false) {
  const response = await supplierSaleServices(query);
  if (response) {
    if (isConcat) {
      list.value = list.value.concat(response.records);
    } else {
      list.value = response.records;
    }
    pageTotal.value = response.total_page;
  }
}

function handleToDetail(item) {
  uni.$u.route({
    url: "/pages/supplier/aftercare-detail",
    params: {
      id: item.id,
    },
  });
}

onShow(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.header {
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.content {
  flex: 1;
  overflow: hidden;
}

.list-container {
  padding: 20rpx;
}

.item-card {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.field {
  display: flex;
  font-size: 28rpx;

  .label {
    width: 140rpx;
    color: #999;
  }

  .value {
    flex: 1;
  }
}

.goods-list {
  margin-top: 20rpx;
  border-top: 1rpx solid #f5f5f5;
  padding-top: 20rpx;
}

.goods-item {
  display: flex;
  margin-bottom: 20rpx;
}

.goods-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.goods-name {
  font-size: 26rpx;
}

.goods-spec {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
}
</style>
